<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<%@page import="com.mall.app.utils.MyAccount"%>
<%@page import="org.apache.shiro.SecurityUtils"%>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>家居商城-我的订单</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../static/css/index.css">
<script src="../layui/layui.js"></script>
</head>
<body>
<%
			MyAccount account = (MyAccount)SecurityUtils.getSubject().getSession().getAttribute("account");
			if(account==null) {
				response.sendRedirect("login.jsp");
				return;
			}
			%>
	<input type="hidden" id="a" name="bid" value="<%=account.getId()%>"/>

	<div class="house-header">
		<div class="layui-container">
			<div class="house-nav">
				<span class="layui-breadcrumb" lay-separator="|" style="visibility: visible;"> 
				<shiro:authenticated>
					<a href="#">欢迎您，[<shiro:principal/>] </a>
				<span lay-separator>|</span>
					 <a href="../logout">注销</a>
				<span lay-separator>|</span>
				</shiro:authenticated>
				<shiro:notAuthenticated>
				    <a href="login.jsp">登录 </a> 
				<span lay-separator>|</span>
				</shiro:notAuthenticated>
				<a href="myOrder.jsp">我的订单</a>
				</span> <span class="layui-breadcrumb house-breadcrumb-icon"
					lay-separator=" "> <a id="search"><i
						class="layui-icon layui-icon-house-find"></i></a> <a href="login.html"><i
						class="layui-icon layui-icon-username"></i></a> <a
					href="usershop.html"><i
						class="layui-icon layui-icon-house-shop"></i></a>
				</span>
			</div>
			<div class="house-banner layui-form">
				<a class="banner" href="../index.jsp"> <img
					src="../static/img/banner.png" alt="家居商城">
				</a>
				<div class="layui-input-inline">
					<input type="text" placeholder="搜索好物" class="layui-input"><i
						class="layui-icon layui-icon-house-find"></i>
				</div>
				<a class="shop" href="cartList.jsp"><i
					class="layui-icon layui-icon-house-shop"></i><span
					class="layui-badge" id="cart-count"></span></a>
			</div>
			<ul class="layui-nav close">
				<li class="layui-nav-item layui-this"><a href="../index.jsp">首页</a></li>
				<li class="layui-nav-item"><a href="list.jsp">居家用品</a></li>
			</ul>
			<button id="switch">
				<span></span><span class="second"></span><span class="third"></span>
			</button>
		</div>
	</div>
	
	<table id="house-user-order" lay-filter="house-userorder-table"></table>
	<div class="layui-container house-usershop">
		<p>猜您喜欢</p>
		<ul class="house-usershop-like">
			<li><a href="detail.html">
					<div>
						<img src="../static/img/paging_img5.jpg">
					</div>
					<p>可爱小瓷杯子</p>
					<p class="price">￥200</p>
			</a></li>
			<li><a href="detail.html">
					<div>
						<img src="../static/img/paging_img6.jpg">
					</div>
					<p>陶瓷面不粘锅</p>
					<p class="price">￥200</p>
			</a></li>
			<li><a href="detail.html">
					<div>
						<img src="../static/img/paging_img5.jpg">
					</div>
					<p>可爱小瓷杯子</p>
					<p class="price">￥200</p>
			</a></li>
			<li><a href="detail.html">
					<div>
						<img src="../static/img/paging_img6.jpg">
					</div>
					<p>陶瓷面不粘锅</p>
					<p class="price">￥200</p>
			</a></li>
			<li><a href="detail.html">
					<div>
						<img src="../static/img/paging_img5.jpg">
					</div>
					<p>可爱小瓷杯子</p>
					<p class="price">￥200</p>
			</a></li>
		</ul>
	</div>

	<div class="house-footer">
		<div class="layui-container">
			<div class="intro">
				<span class="first"><i
					class="layui-icon layui-icon-house-shield"></i>7天无理由退换货</span> <span
					class="second"><i class="layui-icon layui-icon-house-car"></i>满99元全场包邮</span>
				<span class="third"><i
					class="layui-icon layui-icon-house-diamond"></i>100%品质保证</span> <span
					class="last"><i class="layui-icon layui-icon-house-tel"></i>客服400-2888-966</span>
			</div>
			<div class="about">
				<span class="layui-breadcrumb" lay-separator="|"> <a
					href="about.html">关于我们</a> <a href="about.html">帮助中心</a> <a
					href="about.html">售后服务</a> <a href="about.html">配送服务</a> <a
					href="about.html">关于货源</a>
				</span>
				<p>家居商城版权所有 &copy; 2012-2020</p>
			</div>
		</div>
	</div>
	<script src="../static/js/utils.js"></script>
	<script type="text/javascript">
	layui.use([ 'table', 'form' ], function() {
		var layer = layui.layer;
		var form = layui.form;
		var $ = layui.jquery;
		var table = layui.table;
		
		//个人中心——订单
		table.render({
			elem : '#house-user-order',
			page : true,
			url : '../../order/listPage',
			skin : 'line',
			id : 'house-userorder-table',
			where : {
				//buyerId : '1'// 用于测试
				buyerId : document.getElementById('a').value
			// //这里需要获取当前用户
			},
			cols : [ [ {
				type : 'checkbox',
				width : 50
			}, {
				title : '订单信息',
				align : 'center',
				templet : '#orderTpl',
				width : 250
			}, {
				field : 'images',
				title : '商品图片',
				align : 'center',
				templet : '#imageTpl',
				width : 300,
				style : 'height:100px',
			}, {
				title : '商品件数',
				align : 'center',
				templet : '#numTpl',
				width : 100
			}, {
				title : '商品单价',
				align : 'center',
				templet : '#priceTpl'
			}, {
				title : '商品总价',
				align : 'center',
				templet : '#priceTotalTpl'
			},{
				field : 'createTime',
				title : '创建时间',
				align : 'center'
			}, {
				field : 'statstr',
				title : '订单状态',
				align : 'center'
			}, {
				fixed : 'right',
				title : '订单操作',
				align : 'center',
				toolbar : '#barDemo'
			} ] ],
			parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
				for ( var index in res.data) {
					var orders = res.data[index];
					orders.gname = orders.goods.gname;
					orders.gid = orders.goods.gid;
					orders.createTime = dateTime2Str(orders.createTime);
					orders.statstr = statusInt2Str(orders.stat);
					
				}
				console.log(res);
				return {
					"code" : res.code, //解析接口状态
					"msg" : res.msg, //解析提示文本
					"count" : res.count, //解析数据长度
					"data" : res.data
				//解析数据列表
				};
			}
		});
		//渲染购物车
		//渲染购物车数字
		getData($,'../cart/list?buyerId='+<%=account.getId()%>,function(data){
			console.log(data.length);
			var cartCount = document.getElementById('cart-count');
			cartCount.innerHTML=data.length;
		})
		
		
		table.on('tool(house-userorder-table)', function(obj) {
			var data = obj.data;
			if (obj.event === 'check') {
				layer.open({
					type : 1,
					content : '查看物流',
					area : [ '500px', '300px' ]
				});
			} else if (obj.event === 'evaluate') {
				layer.open({
					type : 1,
					content : '收货并评价',
					area : [ '500px', '300px' ]
				});
			} else if (obj.event === 'pay'){
				var data = obj.data;
				layer.confirm('是否付款？', {
					  btn: ['是', '否'] //可以无限个按钮
					}, function(index, layero){
						//按钮【按钮一】的回调
						console.log(data);
						$.post('../order/updateStat', {
							'oid' : data.oid,
							'stat' : 1
						},function(flag) {
							if (flag) {
								table.reload('house-userorder-table', {});
								layer.msg("付款成功");
							} else {
								layer.msg("付款失败");
							}
						});
						layer.closeAll();
					  
					}, function(index){
						//按钮【按钮二】的回调
						layer.closeAll();
					});
			} else if (obj.event === 'cancel'){
				var data = obj.data;
				layer.confirm('是否取消订单并退款？', {
					  btn: ['是', '否'] //可以无限个按钮
					}, function(index, layero){
						//按钮【按钮一】的回调
						//console.log(data);
						var oids = [];
						oids.push(data.oid);
						console.log(oids);
						$.post('../order/delete', {
							'oids' : oids
						},function(flag) {
							if (flag) {
								table.reload('house-userorder-table', {});
								layer.msg("操作成功");
							} else {
								layer.msg("操作失败");
							}
						});
						layer.closeAll();
					  
					}, function(index){
						//按钮【按钮二】的回调
						layer.closeAll();
					});
			}
		});
	});
	</script>
	
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
  	<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  	<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
	<script type="text/html" id="orderTpl">
		<p>{{d.goods.gname}}</p>
	</script>
	<script type="text/html" id="imageTpl">
  		<img src="../res/goods/images/{{d.goods.images}}" style="height:100px"/>
	</script>
	<script type="text/html" id="priceTpl">
 		<p><span class="price">{{d.goods.price}}</span></p>
	</script>
	<script type="text/html" id="numTpl">
		<p><span class="number">{{d.goodsQuantity}}</span></p>
	</script>
	<script type="text/html" id="priceTotalTpl">
  		<span class="total" style="color: #cd2d15;">￥{{(d.goods.price*d.goodsQuantity).toFixed(2)}}</span>
	</script>
	<script type="text/html" id="barDemo">
	{{# if(d.stat == 0){ }}
		<a class="layui-btn layui-btn-xs" lay-event="pay" >
			<i class="layui-icon layui-icon-release"></i> 
			付款
		</a>
	{{# } else if(d.stat == 1){ }}
		<a class="layui-btn layui-btn-xs" lay-event="cancel" >
			<i class="layui-icon layui-icon-release"></i> 
			退款
		</a>
		
	{{# } else if(d.stat == 2){ }}
		<a class="layui-btn layui-btn-xs" lay-event="check">查看物流</a>
	{{# } else if(d.stat == 3){ }}
		<a class="layui-btn layui-btn-xs" lay-event="evaluate">收货并评价</a>
  {{#  } }}	
</script>
</body>
</html>